<template>
  <div class="container">
    <!-- 销售权限信息展示（演示用） -->
    <el-card v-if="!userStore.isAdmin" class="dept-info">
      <template #header>
        <div>当前登录用户信息</div>
      </template>
      <el-descriptions column="1" border>
        <el-descriptions-item label="所属部门"> {{ userStore.deptInfo.deptName }}（ID: {{ userStore.deptInfo.deptId }}） </el-descriptions-item>
        <el-descriptions-item label="可查看部门ID列表">
          {{ userStore.deptInfo.accessibleDeptIds.join(',') }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 客户表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="客户名称" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="ownerId" label="所属销售ID" />
      <!-- 关键：展示owner_id -->
      <el-table-column prop="ownerName" label="所属销售" />
      <el-table-column prop="ownerDeptId" label="销售部门ID" />
    </el-table>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user'
import { onMounted, ref } from 'vue'
import { CustomerApi } from '@/api/modules/customer'

const userStore = useUserStore()
const tableData = ref([])

// 获取客户列表
const loadData = async () => {
  const res = await CustomerApi.getPage({ page: 1, limit: 10 })
  tableData.value = res.list
}

onMounted(loadData)
</script>

<style scoped>
.dept-info {
  margin-bottom: 20px;
}
</style>
